<!-- 抽奖转盘 -->
<template>
  <view class="app">
    <view v-if="false" class="title">
      结果：{{ showTextList[result]?.title }}
    </view>
    <view class="container">
      <!-- 转盘 -->
      <view class="circle" :animation="animationData">
        <view class="lines">
          <view
            v-for="(item, index) in lineList"
            :key="index"
            :style="{
              transform: 'rotate(' + item.rotateDeg + 'deg)',
            }"
          >
          </view>
        </view>

        <view class="texts">
          <view
            v-for="(item, index) in showTextList"
            :key="index"
            :style="{ transform: 'rotate(' + item.rotateDeg + 'deg)' }"
          >
            {{ item.title }}
            <image
              class="icon"
              src="https://img.js.design/assets/img/669aa617d54b104336ae3d55.png#34a75855b41029801297098bae4e63d2"
              mode="aspectFill"
            />
          </view>
        </view>
      </view>
      <!-- 指针 -->
      <image
        @tap="startLottery"
        class="cj-btn"
        src="../../static/images/lottery/cj-btn.png"
        mode="aspectFill"
      />
    </view>
    <image
      class="title-img"
      src="https://img.js.design/assets/img/669a2f53b335ca902da198e6.png#0b1a83497c756ff1d47d5439f3cae5ae"
      mode="heightFix"
    />
    <image
      class="light"
      src="https://img.js.design/assets/img/669a2fc3ee4367d95140c59b.png#a4c9b75f1b15ab8d2d25b508c22a0e35"
      mode="aspectFill"
    />
    <image
      class="zhuanpan"
      src="https://img.js.design/assets/img/669a2fbf1fc558ec9904c588.png#2bb853cc00e5ae7bbd77bc3b567f7c52"
      mode="widthFix"
    />
    <image
      class="my-gift"
      src="../../static/images/lottery/my-gift.png"
      mode="aspectFill"
    />
    <view class="count">抽奖机会：3次</view>
    <!-- 结果弹窗 -->
    <view class="result-modal" v-if="showResult">
      <view class="gift-view">
        <view class="gift">
          <image
            src="../../static/images/lottery/gift.png"
            mode="aspectFill"
          />
          <view class="title">恭喜你中奖啦～</view>
          <view class="gift-name">15元优惠券</view>
          <view class="gift-img">
            <image
              src="https://img.js.design/assets/img/669aa617d54b104336ae3d55.png#34a75855b41029801297098bae4e63d2"
              mode="aspectFill"
            />
          </view>
        </view>
        <view @tap="showResult = false" class="btn">点击领取</view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      showResult: false,
      lineList: [],
      lines: 4,
      phr: 8, //扇形数
      showTextList: [],
      isClicked: false,
      animationData: {},
      lastResult: 0,
      result: 0,
      deg: 0,
    }
  },
  onLoad() {
    this.initData()
  },
  mounted() {},
  methods: {
    // 初始化数据
    initData() {
      for (let i = 0; i < this.lines; i++) {
        this.lineList.push({
          rotateDeg: (360 / this.phr) * i,
        })
      }

      // 文字要逆时针旋转
      // this.showTextList = [
      //   {
      //     title: '1:跑步',
      //     rotateDeg: 0,
      //   },
      //   {
      //     title: '2:游泳',
      //     rotateDeg: -60,
      //   },
      //   {
      //     title: '3:666',
      //     rotateDeg: -120,
      //   },
      //   {
      //     title: '4:打拳',
      //     rotateDeg: -180,
      //   },
      //   {
      //     title: '5:剑道',
      //     rotateDeg: -240,
      //   },
      //   {
      //     title: '6:play piano',
      //     rotateDeg: -300,
      //   },
      // ]
      for (let i = 0; i < this.phr; i++) {
        this.showTextList.push({
          title: `${i * 1 + 1}跑步${i}`,
          rotateDeg: -(360 / this.phr) * i - 22.5,
        })
      }
    },
    /* 开始旋转抽奖 */
    startLottery() {
      if (this.isClicked) {
        //已经点击了
        console.log('点击太频繁啦')
        return
      }
      this.isClicked = true

      let animation = uni.createAnimation({
        transformOrigin: '50% 50%',
        duration: 3000,
        timingFunction: 'ease-out',
        delay: 0,
      })
      this.animationData = animation
      this.animationData.rotate(this.randomNum()).step()
      this.animationData = this.animationData.export()

      setTimeout(() => {
        this.isClicked = false
        this.showResult = true
      }, 3000)
    },
    /* 获取随机数 */
    randomNum() {
      this.result = Math.floor(Math.random() * this.phr) //数组索引：[0,phr-1]
      if (this.result > this.lastResult) {
        this.deg += 360 * 4 + (this.result - this.lastResult) * (360 / this.phr)
      } else {
        this.deg +=
          360 * 4 + 360 - (this.lastResult - this.result) * (360 / this.phr)
      }
      console.log(
        `result:${this.result},lastResult:${this.lastResult},deg:${this.deg}`
      )
      this.lastResult = this.result

      return this.deg + 22.5
    },
  },
}
</script>

<style lang="scss" scoped>
.app {
  position: relative;
  min-height: 100vh;
  background-image: url('https://img.js.design/assets/img/669a2ed1e4dda85f699489da.png#3beee1e4f3573dc669ae4344cedcd201');
  background-size: 100% 100%;
  .title-img {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 100rpx;
    height: 168rpx;
  }
  .light {
    position: absolute;
    top: 420rpx;
    width: 100%;
    height: 600rpx;
  }
  .zhuanpan {
    width: 100%;
    margin-top: 70rpx;
  }
  .my-gift {
    position: absolute;
    right: 10rpx;
    top: 274rpx;
    width: 150rpx;
    height: 150rpx;
  }
  .count {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 160rpx;
    color: #ec5e13;
    font-size: 32rpx;
    font-weight: 700;
  }
}
.title {
  text-align: center;
}

// 转盘样式
.container {
  // border: 1px solid red;
  position: absolute;
  top: 470rpx;
  left: 120rpx;
  .cj-btn {
    position: absolute;
    z-index: 99;
    width: 196rpx;
    height: 220rpx;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
  .circle {
    width: 510rpx;
    height: 510rpx;
    border-radius: 50%;
    background: rgb(251, 234, 214);
  }
  .lines {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .lines > view {
    display: inline-block;
    width: 100%;
    height: 2rpx;
    position: absolute;
    transform-origin: center center;
    background: #ec5e13;
  }

  .texts {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
  }

  .texts view {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 96%;
    color: #ec5e13;
    position: absolute;
    // writing-mode: vertical-rl;
    transform-origin: center center;
    .icon {
      width: 100rpx;
      height: 60rpx;
      margin-top: 24rpx;
    }
  }

  .pointer {
    position: absolute;
    margin: auto;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    /* border: 5rpx solid yellow; */
  }

  .pointer-triangle,
  .pointer-circle {
    position: absolute;
    z-index: 1;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: inline-block;
  }

  .pointer-triangle {
    width: 0;
    height: 0;
    border-style: solid;
    border-top-width: 0px;
    border-color: transparent transparent #bd2d30 transparent;
    transform: translate(-50%, -100%);
  }

  .pointer-circle {
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    color: white;
    font-weight: bold;
    background: #bd2d30;
  }
}

// 结果弹窗样式
.result-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 999;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  .gift-view {
    .gift {
      position: relative;
      width: 552rpx;
      height: 544rpx;
      margin-bottom: 24rpx;
      image {
        width: 100%;
        height: 100%;
      }
      .title {
        position: absolute;
        top: 60rpx;
        left: 170rpx;
        color: #ff401a;
        font-size: 32rpx;
        font-weight: 700;
      }
      .gift-img {
        position: absolute;
        left: 50%;
        top: 170rpx;
        width: 200rpx;
        height: 130rpx;
        // border: 1px solid red;
        transform: translateX(-50%);
      }
      .gift-name {
        position: absolute;
        left: 200rpx;
        bottom: 140rpx;
        color: #ff401a;
        font-size: 32rpx;
        font-weight: 700;
      }
    }
    .btn {
      display: flex;
      align-items: center;
      justify-content: center;
      margin: auto;
      width: 436rpx;
      height: 100rpx;
      border-radius: 132rpx;
      background: linear-gradient(130.92deg, #ffa545 0%, #ff4a62 100%);
      border: 8rpx solid #ffe6e6;
      font-size: 48rpx;
      font-weight: 700;
      color: #ffffff;
    }
  }
}
</style>
